<template>
  <div>
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="活动审批" name="activity"></el-tab-pane>
      <el-tab-pane label="社团申请审批" name="club"></el-tab-pane>
    </el-tabs>

    <!-- 活动审批表格 -->
    <el-table v-if="activeTab === 'activity'" :data="data.tableData" stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="activityName" label="活动名称" />
      <el-table-column prop="clubName" label="社团名称" />
      <el-table-column prop="applyTime" label="申请时间" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button 
            v-if="scope.row.status === '待审核'"
            type="success" 
            size="small" 
            @click="handleApprove(scope.row)"
          >通过</el-button>
          <el-button 
            v-if="scope.row.status === '待审核'"
            type="danger" 
            size="small" 
            @click="handleReject(scope.row)"
          >拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 社团申请审批表格 -->
    <el-table v-if="activeTab === 'club'" :data="data.clubApplications" stripe @selection-change="handleClubSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="studentName" label="申请人" />
      <el-table-column prop="clubName" label="申请社团" />
      <el-table-column prop="applyTime" label="申请时间" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button 
            v-if="scope.row.status === '待审核'"
            type="success" 
            size="small" 
            @click="handleClubApprove(scope.row)"
          >通过</el-button>
          <el-button 
            v-if="scope.row.status === '待审核'"
            type="danger" 
            size="small" 
            @click="handleClubReject(scope.row)"
          >拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div style="margin-top: 20px">
      <el-pagination
          v-model:current-page="data.pageNum"
          v-model:page-size="data.pageSize"
          :page-sizes="[5, 10, 20]"
          layout="total, sizes, prev, pager, next"
          :total="data.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'

const activeTab = ref('activity')
const data = reactive({
  tableData: [],
  clubApplications: [],
  pageNum: 1,
  pageSize: 10,
  total: 0,
  ids: [],
  clubIds: []
})

// 加载活动申请数据
const loadActivityData = () => {
  request.get('/activityapplication/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize
    }
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data.list
      data.total = res.data.total
    } else {
      ElMessage.error(res.msg || '加载数据失败')
    }
  })
}

// 加载社团申请数据
const loadClubData = () => {
  request.get('/club/application/list', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize
    }
  }).then(res => {
    if (res.code === '200') {
      data.clubApplications = res.data.list
      data.total = res.data.total
    } else {
      ElMessage.error(res.msg || '加载数据失败')
    }
  })
}

// 获取状态对应的标签类型
const getStatusType = (status) => {
  const types = {
    '待审核': 'warning',
    '已通过': 'success',
    '已拒绝': 'danger'
  }
  return types[status] || 'info'
}

// 活动申请通过
const handleApprove = async (row) => {
  try {
    await ElMessageBox.confirm('确定通过该申请吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'success'
    })
    
    const res = await request.post('/activityapplication/approve', {
      id: row.id
    })
    
    if (res.code === '200') {
      ElMessage.success('已通过申请')
      loadActivityData()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (err) {
    if (err !== 'cancel') {
      ElMessage.error('操作失败')
    }
  }
}

// 活动申请拒绝
const handleReject = async (row) => {
  try {
    await ElMessageBox.confirm('确定拒绝该申请吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const res = await request.post('/activityapplication/reject', {
      id: row.id
    })
    
    if (res.code === '200') {
      ElMessage.success('已拒绝申请')
      loadActivityData()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (err) {
    if (err !== 'cancel') {
      ElMessage.error('操作失败')
    }
  }
}

// 社团申请通过
const handleClubApprove = async (row) => {
  try {
    await ElMessageBox.confirm('确定通过该申请吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'success'
    })
    
    const res = await request.post('/club/application/approve', {
      id: row.id
    })
    
    if (res.code === '200') {
      ElMessage.success('已通过申请')
      loadClubData()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (err) {
    if (err !== 'cancel') {
      ElMessage.error('操作失败')
    }
  }
}

// 社团申请拒绝
const handleClubReject = async (row) => {
  try {
    await ElMessageBox.confirm('确定拒绝该申请吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const res = await request.post('/club/application/reject', {
      id: row.id
    })
    
    if (res.code === '200') {
      ElMessage.success('已拒绝申请')
      loadClubData()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (err) {
    if (err !== 'cancel') {
      ElMessage.error('操作失败')
    }
  }
}

// 表格多选
const handleSelectionChange = (rows) => {
  data.ids = rows.map(row => row.id)
}

const handleClubSelectionChange = (rows) => {
  data.clubIds = rows.map(row => row.id)
}

// 分页大小改变
const handleSizeChange = (val) => {
  data.pageSize = val
  if (activeTab.value === 'activity') {
    loadActivityData()
  } else {
    loadClubData()
  }
}

// 页码改变
const handleCurrentChange = (val) => {
  data.pageNum = val
  if (activeTab.value === 'activity') {
    loadActivityData()
  } else {
    loadClubData()
  }
}

// 标签页切换
const handleTabClick = () => {
  data.pageNum = 1
  if (activeTab.value === 'activity') {
    loadActivityData()
  } else {
    loadClubData()
  }
}

// 页面加载时获取数据
onMounted(() => {
  if (activeTab.value === 'activity') {
    loadActivityData()
  } else {
    loadClubData()
  }
})
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 